<template>
  <div class=''>
    <h2>动画</h2>
    <button @click="changeAim">点击切换</button>
    <button @click = "show = !show">点我</button>
    <transition name="fade">
      <h2 v-show="isShow">我是中国人</h2>
    </transition>
    <transition name="bounce">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition>
    <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated shake">
      <p v-if="show">学的不仅是技术，更是梦想！！！</p>
    </transition>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isShow: true,
      show:true
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeAim() {
      this.isShow = !this.isShow
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.fade-enter-active {
  transition: all 2s ease;
}

.fade-leave-active {
  transition: all 2s cubic-bezier(1, .02, 1, -0.21)
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

.bounce-enter-active{
    animation: bounce-in 0.5s;
} 
.bounce-leave-active{
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
   0% {
       transform: scale(1);
   }
   50% {
    transform: scale(1.5);
   }
   100%{
    transform: scale(1);
   }
}
</style>